<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover, shrink-to-fit=no">
    <meta name="robots" content="index, follow">
    <title>Spotlight.js &ndash; Modern HTML5 Image Gallery</title>
    <script src="dist/spotlight.bundle.js"></script>
    <!--<script src="dist/js/spotlight.min.js"></script>-->
    <!--<link rel="stylesheet" href="dist/css/spotlight.min.css">-->
    <!-- Custom Control: -->
    <style>
        /*
         * Custom Control:
         * ---------------
         */
        /* custom classes are always prefixed by "spl-" automatically */
        .spl-like{
            background-image: url(demo/gallery/heart-outline.svg);
            background-size: 23px;
        }
        /* optionally, additional state to toggle the button: */
        .spl-like.on{
            background-image: url(demo/gallery/heart.svg);
        }
        /*
         * Custom Animation:
         * -----------------
         */
        /* custom scene transition (slide effect) */
        .only-this-gallery.show .spl-scene{
            transition: transform 0.2s ease;
        }
        /* custom animation "visible state" (css context by custom classname "only-this-gallery" to apply these animation just on a specific gallery) */
        .only-this-gallery.show .spl-pane > *{
            clip-path: circle(100% at center);
            transition: transform 0.35s ease,
                        opacity 0.65s ease,
                        clip-path 0.8s ease;
        }
        /* custom animation "hidden state" ("custom" is the name of the animation you pass as gallery option) */
        .only-this-gallery .spl-pane .custom {
            clip-path: circle(0px at center) ;
            transition: transform 0.65s ease,
                        opacity 0.65s ease;
        }
        /* animation state when gallery is hidden */
        #spotlight.only-this-gallery{
            clip-path: circle(0px at center);
        }
        /* animation state when gallery will open */
        #spotlight.only-this-gallery.show{
            clip-path: circle(100% at center);
            transition: clip-path 0.65s ease 0.15s;
        }
    </style>
    <link rel="stylesheet" href="demo/style.css">
    <meta name="format-detection" content="telephone=no">
    <meta name="description" content="Web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.">
    <meta name="keywords" content="gallery, lightbox, photo-gallery, javascript-library, image-viewer, lightbox-gallery-plugin, gallery-plugin, gallery-extension, gallery-widget, lightbox-gallery, gallery-template, gallery-viewer, gallery-simple, lightbox-plugin">
    <meta name="thumbnail" content="https://nextapps-de.github.io/spotlight/demo/favicon.png">
    <meta property="og:url" content="https://nextapps-de.github.io/spotlight/">
    <meta property="og:site_name" content="Spotlight.js - Modern HTML5 Image Gallery">
    <meta property="og:image" content="https://nextapps-de.github.io/spotlight/demo/og-image.png">
    <meta property="og:title" content="Spotlight.js - Modern HTML5 Image Gallery">
    <meta property="og:description" content="WinBox is the web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.">
    <meta property="og:type" content="Software">
    <meta property="og:url" content="https://nextapps-de.github.io/spotlight/">
    <link rel="icon" sizes="16x16 32x32 48x48 64x64" type="image/png" href="https://nextapps-de.github.io/spotlight/demo/favicon.png">
    <link rel="icon" sizes="512x512 1024x1024" type="image/png" href="https://nextapps-de.github.io/spotlight/demo/og-image.png">
</head>
<body>
    <br>
    <h1>
        <img src="demo/spotlight.svg" alt="Spotlight.js: Modern HTML5 Image Gallery">
    </h1>
    <a href="https://github.com/nextapps-de/spotlight">Goto Github</a><br>
    <hr>
    <br>
    <b>Anchors &amp; Images</b>
    <div class="spotlight-group" data-fit="cover" data-autohide="all">
        <a class="spotlight" href="demo/gallery/brooklyn-bridge-1791001.jpg" data-button="Click Me!" data-button-href="javascript:alert('You can open an URL or execute some Javascript here.')" data-description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.">
            <img src="demo/gallery/brooklyn-bridge-1791001-thumb.jpg" alt="Lorem ipsum dolor sit amet">
        </a>
        <a class="spotlight" href="demo/gallery/california-1751455.jpg" data-description="Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.">
            <img src="demo/gallery/california-1751455-thumb.jpg" alt="At vero eos et accusam">
        </a>
        <a class="spotlight" href="demo/gallery/canada-2340312.jpg" data-description="In hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.">
            <img src="demo/gallery/canada-2340312-thumb.jpg" alt="Duis autem vel eum iriure dolor">
        </a>
    </div>
    <br><br>
    <b>Custom Elements, Videos &amp; Node Fragments</b>
    <div class="spotlight-group">
        <div class="spotlight" data-media="image" data-src="demo/gallery/godafoss-1840758.jpg" data-description="In hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.">
            <img src="demo/gallery/godafoss-1840758-thumb.jpg" alt="Duis autem vel eum iriure dolor">
        </div>
        <a class="spotlight" data-media="video" data-src-webm="https://nextapps.de/video/spotlight/big_buck_bunny.webm" data-src-ogg="https://nextapps.de/video/spotlight/big_buck_bunny.ogv" data-src-mp4="https://nextapps.de/video/spotlight/big_buck_bunny.mp4" data-autoplay="false" data-poster="demo/gallery/poster.jpg">
            <img src="demo/gallery/poster.jpg">
        </a>
        <a class="spotlight" data-media="node" data-src="#fragment">
            <img src="demo/gallery/brooklyn-bridge-1791001-thumb.jpg">
            <img src="demo/gallery/california-1751455-thumb.jpg">
            <img src="demo/gallery/montana-1829251-thumb.jpg">
        </a>
        <div class="spotlight" data-src="demo/gallery/brooklyn-bridge-1791001.jpg"></div>
    </div>
    <!-- Hidden Backstore -->
    <div style="display: none">
        <div id="fragment" style="width: 100%">
            <b>Embedded Node Fragment</b><br><br>
            <img class="image" src="demo/gallery/brooklyn-bridge-1791001-thumb.jpg" width="500" height="334">
            <img class="image" src="demo/gallery/california-1751455-thumb.jpg" width="500" height="333">
            <img class="image" src="demo/gallery/montana-1829251-thumb.jpg" width="500" height="331">
        </div>
    </div>
    <br>
    <hr>
    <br>
    <b>API Call</b><br>
    Choose Controls (Toolbar):<br><br>
    <div id="control">
        <label><input type="checkbox" value="page" checked>Page</label>
        <label><input type="checkbox" value="theme" checked>Theme</label>
        <label><input type="checkbox" value="fullscreen" checked>Fullscreen</label>
        <label><input type="checkbox" value="autofit">Autofit</label>
        <label><input type="checkbox" value="zoom-in">Zoom +</label>
        <label><input type="checkbox" value="zoom-out">Zoom -</label><br>
        <label><input type="checkbox" value="close" checked>Close</label>
        <label><input type="checkbox" value="download" checked>Download</label>
        <label><input type="checkbox" value="play" checked>Play</label>
        <label><input type="checkbox" value="prev" checked>Page Prev</label>
        <label><input type="checkbox" value="next" checked>Page Next</label>
    </div>
    <br>
    Choose Modifier:<br><br>
    <div id="modifier">
        <label><input type="checkbox" value="autoplay" checked>Autoplay</label>
        <label><input type="checkbox" value="infinite" checked>Infinite Slide</label>
        <label><input type="checkbox" value="spinner" checked>Spinner</label>
        <label><input type="checkbox" value="preload" checked>Preload Next</label><br>
        <label><input type="radio" name="autohide" value="false" checked>Autohide: Off</label>
        <label><input type="radio" name="autohide" value="true" checked>Autohide: Controls</label>
        <label><input type="radio" name="autohide" value="all">Autohide: All</label><br>
        <label><input type="radio" name="fit" value="cover" checked>Autofit: Cover</label>
        <label><input type="radio" name="fit" value="contain">Autofit: Contain</label><br>
        <label><input type="radio" name="theme" value="" checked>Theme: default</label>
        <label><input type="radio" name="theme" value="white">Theme: white</label>
    </div>
    <br>
    Choose Animation:<br><br>
    <div id="animation">
        <label><input type="checkbox" value="slide" checked>Slide</label>
        <label><input type="checkbox" value="fade" checked>Fade</label>
        <label><input type="checkbox" value="scale">Scale</label>
        <label><input type="checkbox" value="custom">Custom</label>
    </div>
    <br><br>
    <div class="image" style="height: auto; margin: 0 1vmin">
        <button onclick="showGallery(1)">Show</button>
    </div>
    <div class="image" style="height: auto; margin: 0 1vmin">
        <button onclick="showGallery(2)">Show</button>
    </div>
    <div class="image" style="height: auto; margin: 0 1vmin">
        <button onclick="showGallery(3)">Show</button>
    </div>
    <div>
        <div class="image" style="background-image:url(demo/gallery/london-1758181-thumb.jpg)"></div>
        <div class="image" style="background-image:url(demo/gallery/sea-1975403-thumb.jpg)"></div>
        <div class="image" style="background-image:url(demo/gallery/newport-beach-2089906-thumb.jpg)"></div>
    </div>
    <br><br>
    <script>

        /* Full example of API usage including "like button" as a custom control */

        //import Spotlight from "./src/js/spotlight.js";

        (function(){

            const gallery = [{

                title: "Lorem ipsum dolor sit amet",
                description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
                src: "demo/gallery/london-1758181.jpg",
                button: "Download Image",
                onclick: Spotlight.download,
                like: false
            },{
                title: "At vero eos et accusam",
                description: "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
                src: "demo/gallery/sea-1975403.jpg",
                button: "Next Slide",
                onclick: Spotlight.next,
                like: false,
            },{
                title: "Duis autem vel eum iriure dolor",
                description: "In hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.",
                src: "demo/gallery/newport-beach-2089906.jpg",
                button: "Close Gallery",
                onclick: Spotlight.close,
                like: false
            }/*,{
                media: "node",
                control: "next,prev,close",
                src: (function(){
                    const iframe = document.createElement("iframe");
                    iframe.src = "https://www.youtube.com/embed/tgbNymZ7vqY";
                    return iframe;
                }())
            }*/];

            window.showGallery = function(index){

                const control = to_array(document.getElementById("control").getElementsByTagName("input"));
                const animation = to_array(document.getElementById("animation").getElementsByTagName("input"));
                const modifier = document.getElementById("modifier").getElementsByTagName("input");

                // store the button element to apply dom changes to it
                let like;
                // store the current index
                let slide = 0;

                function handler(){

                    // get the current like state
                    // at this point we use the stored last index from the variable "slide"
                    const current_like_state = !gallery[slide].like;

                    // toggles the current like state
                    gallery[slide].like = current_like_state;

                    // assign the state as class to visually represent the current like state
                    this.classList.toggle("on");

                    if(current_like_state){

                        // do something if liked ...
                    }
                    else{

                        // do something if unliked ...
                    }
                }

                const options = {

                    class: "only-this-gallery",
                    index: index,
                    control: control,
                    animation: animation,
                    // fires when gallery opens
                    onshow: function(index){

                        // the method "addControl" returns the new created control element
                        like = Spotlight.addControl("like", handler);
                    },
                    // fires when gallery change to another page
                    onchange: function(index, options){

                        // store the current index for the button listener
                        // the slide index start from 1 (as "page 1")
                        slide = index - 1;

                        // initially apply the stored like state when slide is openened
                        // at this point we use the stored like element
                        like.classList.toggle("on", gallery[slide].like);
                    },
                    // fires when gallery is requested to close
                    onclose: function(index){

                        // remove the custom button, so you are able
                        // to open next gallery without this custom control
                        Spotlight.removeControl("like");
                    }
                };

                assign(options, modifier);

                Spotlight.show(gallery, options);
            };

            /* helper functions to assign options for the demo page, so skip this part from here */

            function to_array(nodelist){

                const arr = [];

                for(let i = 0, node; i < nodelist.length; i++){

                    node = nodelist[i];
                    node.checked && arr.push(node.value);
                }

                return arr;
            }

            function assign(options, nodelist){

                for(let i = 0, node; i < nodelist.length; i++){

                    node = nodelist[i];

                    if(node.checked){

                        if(node.name){

                            options[node.name] = node.value;
                        }
                        else{

                            options[node.value] = node.checked;
                        }
                    }
                }
            }

        }());

    </script>
</body>
</html>